<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>课工场论坛列表</title>
    <link href="css/bbs.css" rel="stylesheet">
    <script>
    	var tu =new Array("images/tou01.jpg","images/tou02.jpg","images/tou03.jpg","images/tou04.jpg");
    	function need(){
    		document.getElementById("id1").style.display="block";
    	}
    	function fabu(){
    		document.getElementById("id1").style.display="none";
    
    		var tupian = Math.floor(Math.random()*4);
    		//创建图片节点
    		var tu1 = document.createElement("img");
    		tu1.setAttribute("src",tu[tupian]);  //随机下标获取图片
    		//创建标题节点
    		var biaoti = document.createElement("h1");
    		var inner = document.getElementById("tit").value; //取标题内容 此处不能用innerHTML
    		biaoti.innerHTML = inner;  
    		//创建版快
    		var bankuai = document.createElement("span");
    		bankuai.innerHTML = "板块：" + document.getElementsByTagName("select")[0].value;
    		//发布时间
    		var time = new Date();
    		var shijian = document.createElement("span");
    		shijian.innerHTML = "发表时间：" + time.getFullYear()+"-"+ (time.getMonth()+1)+"-"+time.getDay();
    		//把创建的节点连接
    		var linode = document.createElement("li");  //创建li节点
    		var ulnode = document.getElementsByTagName("section")[0].firstElementChild; //取ul节点
    		
    		var newdiv = document.createElement("div");
    		linode.appendChild(newdiv); //li里面加个div
    		newdiv.appendChild(tu1); //图片放在div 里
    		linode.appendChild(biaoti); //标题放div后
    		var duanluo = document.createElement("p"); 
    		duanluo.appendChild(bankuai); //板块放在段落里
    		duanluo.appendChild(shijian);	//时间放在段落里
    		linode.appendChild((duanluo));	
    		ulnode.insertBefore(linode,ulnode.firstElementChild);
    	}
    </script>
</head>
<body>
<div class="bbs">
    <header><span onclick="need()">我要发帖</span></header>
    <section>
        <ul></ul>
    </section>
    <div class="post" id="id1">
        <input class="title" id="tit" placeholder="请输入标题（1-50个字符）">
        所属版块：<select><option>请选择版块</option><option>电子书籍</option><option>新课来了</option><option>新手报到</option><option>职业规划</option></select>
        <textarea class="content"></textarea>
        <input onclick="fabu();" class="btn" value="发布">
    </div>
</div>
</body>
</html>